<template>
    <div>
        <ul class="flex-ul" v-if="carInfo.type === 1">
            <li class="flex-left">
                <h4>{{carInfo.title}}</h4>
                <p>{{carInfo.from}}</p>
            </li>
            <li class="flex-right">
                <img v-lazy="carInfo.img" alt=""/>
            </li>
        </ul>
        <dl class="advert" v-if="carInfo.type === 2">
            <dd>{{carInfo.title}}</dd>
            <dt>
                <img v-lazy="carInfo.img" alt=""/>
            </dt>
        </dl>
        <section class="three-line" v-if="carInfo.type === 3">
            <h4>{{carInfo.title}}</h4>
            <ul>
                <li v-for="(item,index) in carInfo.img" :class="{isSecond: index === 1}" :key="item.key">
                    <img v-lazy="item" alt=""/>
                </li>
            </ul>
        </section>
    </div>
</template>

<script>
    export default {
        name: "car-card",
        props: {
            carInfo: {
                type: Object,
                default: () => {
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .flex-ul {
        display: flex;
        padding: 14px;
        border-bottom: 1px solid #f8f8f8;
        .flex-left {
            flex: 1;
            position: relative;
            padding-right: 14px;
            h4 {
                font-size: 15px;
                color: #333;
                line-height: 1.5em;
                font-weight: bold;
            }
            p {
                position: absolute;
                left: 0;
                bottom: 0;
                font-size: 13px;
                color: #999;
            }
        }
        .flex-right {
            flex: 0 0 112px;
            height: 84px;
            img {
                width: 100%;
                height: 100%;
                border-radius: 2px;
            }
        }
    }

    .advert {
        padding: 14px;
        border-bottom: 1px solid #f8f8f8;
        dd {
            height: 28px;
            line-height: 28px;
            font-size: 15px;
            font-weight: bold;
            color: #333;
        }
        dt {
            height: 194px;
            img {
                width: 100%;
                height: 100%;
                border-radius: 2px;
            }
        }
    }

    .three-line {
        padding: 14px;
        border-bottom: 1px solid #f8f8f8;
        h4 {
            line-height: 24px;
            font-size: 15px;
            font-weight: bold;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        ul {
            display: flex;
            height: 84px;
            margin-top: 8px;
            li {
                flex: 1;
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 2px;
                }
            }
            .isSecond {
                padding: 0 4px;
            }
        }
    }
</style>
